import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Card, Table, DatePicker, Input, Button, Select } from 'antd';

import styles from './index.module.less';

const columns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
  }, {
    title: '交易类型',
    dataIndex: 'type',
    key: 'type',
  }, {
    title: '交易金额',
    dataIndex: 'amount',
    key: 'amount',
  }, {
    title: '交易银行',
    dataIndex: 'bank',
    key: 'bank',
  }, {
    title: '处理完成时间',
    dataIndex: 'finishTime',
    key: 'finishTime',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
];

const data = [ ];
for (let i = 1; i < 46; i++) {
  data.push({
    key: i,
    time: '2018-08-08  ',
    type: '充值',
    amount: '100',
    bank: '交通银行',
    finishTime: '2018-10-10 18:20:20',
    status: '完成',
  });
}

export default class AccountCenter extends Component {
  state = {
    startValue: null,
    endValue: null,
    endOpen: false,
  };

  disabledStartDate = startValue => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }

  disabledEndDate = endValue => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  }

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  }

  onStartChange = value => {
    this.onChange('startValue', value);
  }

  onEndChange = value => {
    this.onChange('endValue', value);
  }

  handleStartOpenChange = open => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange = open => {
    this.setState({ endOpen: open });
  }

  render() {
    const { startValue, endValue, endOpen } = this.state;
    const Option = Select.Option;

    function handleChange(value) {
      console.log(`selected ${value}`);
    }

    function handleBlur() {
      console.log('blur');
    }

    function handleFocus() {
      console.log('focus');
    }
    return (
      <div className={styles.accountCenterBox}>
        <div className={styles.topBox}>
          <div className={styles.clearfix}></div>
          <div className={styles.leftBox + ' ' + styles.pullLeft}>
            <i className={`iconfont icon-baozhengjin ${styles.moneyIcon}`}></i>
          </div>
          <div className={styles.centerBox + ' ' + styles.pullLeft}>
            <div className={styles.title1}>保证金总金额</div>
            <div className={styles.title2}>0.00元</div>
          </div>
          <div className={styles.rightBox + ' ' + styles.pullLeft}>
            <button className={styles.btn1}>充值</button>
            <button className={styles.btn2}>提现</button>
          </div>
        </div>
        <Card
          title="账户明细"
          style={{ width: '100%', marginTop: 20 }}
        >
          <div className={styles.titleBox}>
            <span>交易时间：</span>
            <DatePicker
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={startValue}
              placeholder="Start"
              onChange={this.onStartChange}
              onOpenChange={this.handleStartOpenChange}
            />
            <span className={styles.s2}>~</span>
            <DatePicker
              disabledDate={this.disabledEndDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={endValue}
              placeholder="End"
              onChange={this.onEndChange}
              open={endOpen}
              onOpenChange={this.handleEndOpenChange}
            />
            <span className={styles.s1}>交易金额：</span>
            <Input placeholder="Basic usage" style={{ width: 195 }}/>
            <span className={styles.s2}>到</span>
            <Input placeholder="Basic usage" style={{ width: 195 }} />
            <Button className={styles.btn}>查询</Button>
            <span className={styles.s1}>交易类型：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="全部"
              optionFilterProp="children"
              onChange={handleChange}
              onFocus={handleFocus}
              onBlur={handleBlur}
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              <Option value="1">全部</Option>
              <Option value="2">充值</Option>
              <Option value="3">提现</Option>
            </Select>
          </div>
          <Table columns={columns} dataSource={data} />
        </Card>,
      </div>
    );
  }
}
